<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts'
import resize from './mixins/resize'
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '500px'
    },
    chartData: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      handler(val) {
        if (val && val.series && val.series.length > 0) {
          this.$nextTick(() => {
            this.initChart()
          })
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      // this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.setOption({
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        tooltip: {
          width: 50,
          extraCssText: 'width:300px;text-overflow: ellipsis;overflow: hidden;',
          trigger: 'item',
          show: true,
          borderColor: '#10ac84',
          borderWidth: 1,
          backgroundColor: 'rgba(255, 255, 255,1.0)',
          textStyle: {
            color: '#222f3e',
            overflow: 'truncate',
            ellipsis: '...',
            width: 50
          },

          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, .4)',
          shadowOffsetX: 2,
          shadowOffsetY: 3
        },
        color: ['#434EB8', '#5F69E4', '#509AFD', '#71D5F8', '#14C8C7', '#FDB92C', '#FF8643', '#DB5A52'],
        radar: {
          name: {
            textStyle: {
              color: 'black',
              borderRadius: 3,
              padding: [3, 5]
            }
          },
          indicator: this.chartData.indicator
        },
        series: [{
          name: '基金评分雷达图',
          type: 'radar',
          data: [
            {
              value: this.chartData.series,
              name: this.chartData.name
            }
          ]
        }]
      })
    }
  }
}
</script>
